import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Relax } from 'iflux2'
import { Icon } from 'antd'
import { List, fromJS } from 'immutable'
import noop from 'util/noop'

import { Popconfirm, Modal } from 'antd'

const tabsArray = { 'news': '微信图文', 'adNews': '高级图文' }
const tipsArray = { 'news': '该类型可以用于群发。', 'adNews': '该类型不可用于群发，可用于关键词、菜单等回复。' }

@Relax
export default class Tab extends Component {

    static defaultProps = {
        tabs: '',
        edited: false,
        _changeTab: noop,
        _setEdited: noop,
    }

    render() {
        const { tabs, edited } = this.props;

        return (
            <div>
                <ul className="tabs">
                    {
                        fromJS(tabsArray).map((value, key) => {
                            return (
                                <li className={tabs == key ? 'cur' : ''} onClick={() => this._changeTab(key)}>{value}</li>
                            )
                        })
                    }
                </ul>
                <p className="tips"><Icon type="exclamation-circle" />{tipsArray[tabs]}</p>
            </div>
        )
    }

    //tab切换
    _changeTab = (tabName) => {
        if (this.props.edited) {
            Modal.confirm({
                title: '当前修改未保存，确认切换？',
                content: '切换后将不保存当前编辑内容',
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                    this.props._setEdited(false);
                    this.props._changeTab(tabName);
                }
            });
        } else {
            this.props._changeTab(tabName);
        }
    }
}